<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <div class="information-card">
                    <!-- 电站信息 -->
                    <div class="information_text">
                        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="width: 100%;">
                            <el-tab-pane v-for="(item, index) in tabPaneNameList" :label="item.label" :key="item.name"
                                :name="item.name">
                                <EquipmentTable :activeName="activeName" />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>

            </el-col>

        </el-row>
    </div>
</template>

<script>
import EquipmentTable from './equipmentTable.vue';
export default {
    components: { EquipmentTable },
    data() {
        return {
            solarPanelImageUrl: require('@/assets/images/plantImg-default.jpeg'),
            activeName: 'inverter',
            tabPaneNameList: [
                { name: 'inverter', label: '逆变器' },
                { name: 'energyStorage', label: '储能' },
                { name: 'gateway', label: '通讯网关' },
                { name: 'acquisitionDevice', label: '数采器' },
                { name: 'electricityMeter', label: '电表' },
                { name: 'weatherInstrument', label: '气象仪' },
                { name: 'boxtransformer', label: '箱变' },
                { name: 'pcs', label: 'PCS' },
                { name: 'powerSupply', label: '电源' },
                { name: 'positioner', label: '定位器' },
            ]
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(this.activeName);

        }
    },
}
</script>

<style scoped lang="scss">
.information-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
    // margin-top: 20px;
    // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    justify-content: center;
    color: #666666;

    div {
        padding: 5px 0;
    }

    span {
        color: #000;
    }

    .solar-panel-image {
        width: 100%;
        height: 150px;
    }
}

.information-info {
    padding: 0 20px !important;
}

.information_text {
    display: flex;
    justify-content: space-between;

    .information_title {
        font-size: 20px;
        color: #000;
        font-weight: 700;
    }
}
</style>